import React, { Component,createRef } from 'react'
//! 三种获取节点的方法，第一种不让用了

export default class UnControl extends Component {
    state={
        num:0
    }

    // 开始解构出来了
    //! 第三种方法,在前面必须要先createRef
    h=createRef()

    componentDidMount(){
        //? 第一种ref字符串获取DOM节点的方法，已弃用
        // console.log(this.refs.inp);//对应input节点
        this.refs.inp.focus();
        console.log(this.h);

        //? 第三种 
        console.log(this.h.current);//获取 h2 DOM 节点
    }
    add=()=>{
        this.setState({num:this.state.num+1})
    }
    getNode=(node)=>{
        this.h2=node;
        console.log(123);
    }
    render() {
        console.log(this)
        return (
            <div>
                {/* 第一种方法 */}
                <h1 ref='title'>refs的用法</h1>
                <input ref='inp'/>

                {/* 第二种方法：回调函数 */}
                {/* 给类增加了一个h2属性，属性为h2节点对象 */}
                                {/* h2类的普通的一个属性 */}
                {/* <h2 ref={(node)=>{this.h2=node;console.log(123)}}>ref回调函数的用法</h2> */}
                
                {/* 这样写更新时就不会执行两次了；ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题 */}
                <h2 ref={this.getNode}>ref回调函数的用法</h2>
                <h2>{this.state.num}</h2>
                {/* 一点击页面就更新了，页面更新时，ref回到函数会被执行两次*/}
                <button onClick={this.add}>点我加一</button>

                {/* 第三种方法：createRef */}
                <h2 ref={this.h}>createRef()形式</h2>

            </div>
        )
    }
}
